<script setup>
import {DoubleLeftOutlined, SearchOutlined} from '@ant-design/icons-vue'
import {message} from 'ant-design-vue'
import {getCurrentInstance} from "vue";
import {itemInfo} from "~/logic/apis/item";
import {TRequest} from "~/utils/ali/PCRequest";
import Line from './line.vue'
import {isLogin} from '~/logic'
import User from '~/contentScripts/views/tao/list/components/user.vue'

const emit = defineEmits(['login'])
/**
 * @type ItemInterface
 */
const item = getCurrentInstance().proxy.$item
// 总销量
const totalSalesNumber = ref(-1)
// 月销量
const monthlySalesNumber = ref(-1)
// 月付款人数
const monthlyPayNumber = ref(-1)
// 总收藏人数
const collectionsNumber = ref(-1)
// 月收货人数
const monthlyReceiptNumber = ref(-1)
// 评论人数
const rateNumber = ref(-1)
// 支付订单数
const payOrderNumber = ref(-1)
// 人均支付件数
const averagePayNumber = ref(-1)
// 0 未查询 1 查询中 2 查询成功
const searchStatus = ref(0)
const __option = getCurrentInstance()?.appContext.provides.option;
const search = () => {
  if (isLogin({emit}, __option)) {
    searchStatus.value = 1
    item.getDetail().then((res) => {
      console.log("🚀 ~ item.getDetail ~ res:", res)
      searchStatus.value = 2
      searchKeys[0].value = res.skuBase.skus.length;
      searchKeys[3].value = res.item.favcount;
      searchKeys[4].value = res.item.commentCount;
      searchKeys[5].value = res.vertical.askAll.questNum;
      searchKeys[6].value = res.rate.totalCount;
      searchKeys[7].value = res.seller.allItemCount;
    }).catch(() => {
      searchStatus.value = 0
      message.error('查询失败')
    })
    TRequest.pcTmDetail(item.itemId()).then((res) => {
      console.log(res.item.vagueSellCount,res.skuCore.sku2info[0].price.priceMoney);
      
      searchKeys[1].value = res.item.vagueSellCount;
      searchKeys[2].value = formatNumberString(res.item.vagueSellCount,res.skuCore.sku2info[0].price.priceMoney);
    }).catch((err) => {
      console.log("🚀 ~ TRequest.pcTmDetail ~ err:", err)
      searchStatus.value = 0
      message.error('查询失败')
    })
  }
}

const formatNumberString = (input, multiplier) => {
  if (!input || !multiplier) return
  const str = input.toString().split('+').shift();
  // 预定义单位映射
  const unitMap = {
    '万': 10000,
    '千': 1000,
    '百': 100,
    '十': 10,
    '': 1  // 没有单位时
  };
  const regex = /^([\d.]+)(万|千|百|十|件|个|XXX|\+)?$/;
  const match = str.match(regex);
  if (!match) {
    throw new Error('输入格式不正确');
  }
  let numberPart = parseFloat(match[1]);
  const unitPart = match[2] || '';  // 可能没有单位
  // 将单位转换为对应的数值
  const unitValue = unitMap[unitPart] || 1;
  numberPart *= (unitValue * multiplier) / 100;
  let formattedNumber;
  if (numberPart >= 10000) {
    formattedNumber = (numberPart / 10000).toFixed(2) + '万';
  } else {
    formattedNumber = numberPart.toFixed(2);
  }
  return formattedNumber;
}
const searchKeys = reactive([
  {
    // SKU数
    key: 'skuNumber',
    label: 'SKU数',
    value: null,
    // 后缀
    suffix: '个'
  },
  {
    // 已售
    key: 'sold',
    label: '已售',
    value: null,
    // 后缀
    suffix: '件'
  },
  {
    // 已售估销售额
    key: 'soldAmount',
    label: '已售估销售额约',
    value: null,
    // 后缀
    suffix: '元'
  },
  {
    // 收藏
    key: 'collect',
    label: '收藏',
    value: null,
    // 后缀
    suffix: '人'
  },
  {
    // 评论
    key: 'rate',
    label: '评论',
    value: null,
    // 后缀
    suffix: '+'
  },
  {
    // 问大家
    key: 'ask',
    label: '问大家',
    value: null,
    // 后缀
    suffix: ''
  },
  {
    // 付款人数
    key: 'payer',
    label: '付款',
    value: null,
    // 后缀
    suffix: '人'
  },
  // {
  //   // 问大家
  //   key: 'monthlyReceipt',
  //   label: '月收货',
  //   value: null,
  //   // 后缀
  //   suffix: ''
  // },
  {
    // 店铺宝贝数
    key: 'itemNumber',
    label: '店铺宝贝数',
    value: null,
    // 后缀
    suffix: ''
  }
])
</script>

<template>
  <a-row type="flex">
    <a-col flex="1">
      <a-row type="flex" class="inner-box">
        <a-col flex="1">
          <a-row type="flex" justify="space-between">
            <template v-for="(item,index) in searchKeys">
              <a-col>
                <a-row type="flex">
                  <a-col class="label">
                    {{ item.label }}：
                  </a-col>
                  <a-col flex="1" class="blue">
                    {{ item.value == null ? '-' : item.value + ' ' + item.suffix }}
                  </a-col>
                </a-row>
              </a-col>
              <!--          <Line  v-if="index<searchKeys.length-1"/>-->
            </template>
          </a-row>
        </a-col>
        <Line style="margin-left: 20px;"/>
        <a-col class="label blue" style="width: 100px;">
          <div v-if="searchStatus === 0" class="search-box" @click="search">
            <SearchOutlined/>
            点击查询
          </div>
          <div v-if="searchStatus === 1" class="search-box">
            <a-spin size="small"/>
            查询中...
          </div>
          <div v-if="searchStatus === 2" class="search-box" @click="search">
            <SearchOutlined/>
            重新查询
          </div>
        </a-col>
      </a-row>
    </a-col>
    <!--    <div style="width: 5px;" /> -->
    <a-col style="padding-top: 3px;">
      <User @login="emit('login')"/>
    </a-col>
  </a-row>
</template>

<style lang="less" scoped>
.search-box {
  width: 80px;
  height: 19px;
  overflow: hidden;
  cursor: pointer;
}

.more {
  font-size: 14px;
  transform: rotate(90deg);

  &:hover {
    transform: rotate(270deg) scale(1.1);
  }
}

.sale-popover {
  text-align: center;
  box-sizing: content-box;

  > * {
    box-sizing: border-box;
  }

  .value {
    text-align: center;
    font-size: 14px;
  }

  .label {
    text-align: center;
    font-size: 12px;
    color: #666;
  }
}
</style>
